<template>
  <div class="personal-wrapper">

      <van-skeleton avatar :row="3" :loading="isLoading" avatar-size="1.875rem" :row-width="['50%','80%','100%']" round class="personal-info">
        <div class="personal-info">
            <img src="@/assets/image/boy.png" alt="" class="avatar">
            <div class="personal-info-content">
                  <span class="personal-info-text">昵称：{{ userInfo.name }}</span>
                  <span class="personal-info-text">登录名：{{ userInfo.loginName }} </span>
                  <span class="personal-info-text">个性签名：{{ userInfo.signature }}</span>
            </div>
        </div>
      </van-skeleton>

    <div class="func-box">

      <div class="func-item-box" v-for="(item,index) in funcList" :key="index">
        <span class="title">{{ item.title }}</span>
        <van-icon name="arrow" color="#888" size="1.2em"></van-icon>
      </div>

    </div>

  </div>
</template>

<script lang="ts">
interface userInfoInterface {
  name: string,
  loginName: string,
  signature: string
}

import { defineComponent, reactive,ref,Ref, } from 'vue'
export default defineComponent({
    setup() {
        // 模块信息
        const funcList = [
          {title: '我的订单',path: ''},
          {title: '账号管理',path: ''},
          {title: '地址管理',path: ''},
          {title: '关于我们',path: ''},
        ]

        const isLoading: Ref<boolean> = ref(true)

        let userInfo:userInfoInterface = reactive({
            name: '',
            loginName: '',
            signature: ''
        })

        setTimeout(() => {
            userInfo.name = '蔡英雄'
            userInfo.loginName = '13800000000'
            userInfo.signature = '随新所欲，好获多多'

            isLoading.value = false
        },1000)

        return {
          funcList,
          userInfo,
          isLoading
        }
    },
})
</script>


<style lang="less" scoped>
.personal-wrapper {
  padding: .25rem .375rem;
}

.personal-info {
  display: flex;
  align-items: center;
  .gradual-background;
  height: 3.125rem;
  border-radius: .3125rem;
  box-shadow: 0 .0625rem .375rem #aaa;
  padding: 0 .625rem;

  .avatar {
    width: 1.875rem;
    height: 1.875rem;
  }

  .personal-info-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: .375rem;
  }

  .personal-info-text {
    color: #fff;
  }

}

.func-box {
  margin-top: .375rem;

  .func-item-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4e4e4;
    padding: .3125rem 0;

    &:active {
      background-color: #e4e4e4;
    }
  }
}
</style>